<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 650px;
            height: 600px;
            border: 5px solid #f40;

        }
        .box-list{
            width: 100%;
            height: 100px;
            display: flex ;
        }
        .box-list > li{
            position: relative;
            float: left;
            height: 100%;
            flex-grow:1;
            /*height: 70px;*/
            margin-left: -5px;
            border: 5px solid #4199D7;
        }
        .box-show{
            width: 100%;
            height: 300px;
            flex-grow:1;
        }
        .box-so{
            height: 100%;
            flex-grow:1;
            margin-left: -5px;
            background-color: #faa;
            border: 5px solid #924079;
        }

    </style>
</head>
<body>
<div class="box">
    <ul class="box-list">
        <li></li>
        <li></li>
        <li></li>
        <li ></li>
    </ul>
    <div class="box-show">
        <div class="box-so"></div>
    </div>
</div>
</body>
</html>